<template>
  <page-container :title="false">
    <a-spin :spinning="loadingStore" slot="content">
      <store-info-wrap :storeInfo="storeInfo" storeType="house" @check="getStoreInfo"></store-info-wrap>
    </a-spin>
    <div class="store-btns">
      <a-button type="primary" class="store-btn">订单</a-button>
      <router-link :to="{ name: 'clerkList', query: { id: storeInfo.id, type: 'house' } }">
        <a-button type="primary" class="store-btn">店员管理</a-button>
      </router-link>
      <router-link :to="{ name: 'inviteUser', query: { type: 'house', id: storeInfo.id } }">
        <a-button type="primary" class="store-btn">邀请的人</a-button>
      </router-link>
      <a-button type="primary" class="store-btn" @click="handleRatio">设置乐管家百分比</a-button>
      <div class="store-scan-btn">
        <a-space>
          <a-button @click="getOrderPush" v-if="!orderPushing" type="primary">语音提示</a-button>
          <a-button @click="getOrderPush" v-else type="danger">语音提示中</a-button>
        </a-space>
      </div>
    </div>
    <a-card :bordered="false" style="margin-top:24px">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="4" :sm="24">
              <a-form-item>
                <a-range-picker @change="onChange">
                  <a-icon slot="suffixIcon" type="calendar" />
                </a-range-picker>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-form-item>
                <a-input placeholder="姓名/手机号/订单号" v-model="queryParam.search" />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="refreshTable" icon="search">查询</a-button>
              </span>
            </a-col>
            <!-- <a-col :md="1" :sm="24" :offset="10">
              <a-button type="primary" icon="plus" @click="handleAdd">新增</a-button>
            </a-col> -->
          </a-row>
        </a-form>
      </div>
      <service-order-table :data="loadData" ref="orderTable" type="house" />
      <steward-ratio-form ref="stewardRatioModal" @ok="getStoreInfo" />
    </a-card>
  </page-container>
</template>

<script>
import { houseOrder, houseOrderPush } from '@/api/house'
import { storeInfo, stewardRatio } from '@/api/store'
import StewardRatioForm from '@/views/store/modules/stewardRatioForm'
import { mapGetters } from 'vuex'
import ServiceOrderTable from '@/components/serviceOrderTable/serviceOrderTable'
import StoreInfoWrap from '@/views/store/modules/StoreInfoWrap'
export default {
  name: 'HouseOrder',
  components: {
    StewardRatioForm,
    StoreInfoWrap,
    ServiceOrderTable
  },
  data () {
    return {
      radtioVisible: false,
      radtioConfirmLoading: false,
      ratioMdl: null,
      queryParam: {
        search: '',
        atime: '',
        etime: ''
      },
      loadData: parameter => {
        const params = this.$route.params || {}
        const requestParameters = Object.assign({ id: params.store_id }, parameter, this.queryParam)
        console.log('loadData request parameters:', requestParameters)
        return houseOrder(requestParameters).then(res => {
          return res.data
        })
      },
      storeInfo: {},
      loadingStore: false,
      orderPushing: false // 语音播报状态
    }
  },
  created () {
    this.getStoreInfo()
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
     getOrderPush () {
      if (this.orderPushing) {
        clearInterval(this.timer)
        this.time = null
        this.orderPushing = false
      } else {
        this.orderPushing = true
        this.timer = setInterval(() => {
          houseOrderPush().then(res => {
            this.playAudio()
          })
        }, 1000 * 60)
      }
    },
    playAudio () {
      this.$refs.audio.play()
    },
    handleRatio () {
      const ratioMdl = {
        id: this.storeInfo.id,
        number: this.storeInfo.le_ratio || this.storeInfo.ratio,
        type: 'house',
        mobile: this.userInfo.mobile
      }
      this.$refs.stewardRatioModal.show(ratioMdl)
    },
    getStoreInfo () {
      this.loadingStore = true
      const params = this.$route.params
      storeInfo({ id: params.store_id, type: 'house' })
        .then(res => {
          this.storeInfo = res.data
        })
        .finally(() => (this.loadingStore = false))
    },
    onChange (date, dateString) {
      console.log(date, dateString)
      this.queryParam.atime = dateString[0]
      this.queryParam.etime = dateString[1]
    },
    handleRadioOk () {
      const form = this.$refs.stewardRatioModal.form
      this.confirmLoading = true
      form.validateFields((errors, values) => {
        if (!errors) {
          console.log('values', values)
          const params = {
            ...values,
            type: 'house'
          }
          stewardRatio(params)
            .then(res => {
              this.radtioVisible = false
              form.resetFields()
              this.$refs.table.refresh()
              this.$message.success('操作成功')
            })
            .finally(() => (this.confirmLoading = false))
        } else {
          this.confirmLoading = false
        }
      })
    },
    refreshTable () {
      this.$refs.orderTable.refresh()
    }
  }
}
</script>

<style lang="less" scoped>
.store-container {
  display: flex;
  // color: #000001;
  .store-code {
    width: 50px;
    height: 50px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .store-info {
    margin-left: 20px;
    width: 350px;
    .store-content {
      line-height: 1.5;
      min-height: 21px;
      &:first-child {
        margin-bottom: 0.8em;
      }
    }
    & + .store-info {
      margin-left: 50px;
    }
  }
}
.store-btns {
  display: flex;
  .store-btn {
    background: #18cfc8;
    border-color: #18cfc8;
    margin-right: 8px;
  }
  .store-scan-btn {
    margin-left: auto;
    margin-right: 20px;
  }
}
</style>
